<template>
  <div class="wrap">
    <div style="min-height: 100vh; margin-bottom: 105px">
      <div class="wrap_top">
        <van-nav-bar title="导师评价" placeholder fixed left-arrow />
        <!--常规导师-->
        <div class="cg-daoshi">
          <div class="item">
            <div class="item_left">
              <img src="@img/bgtx.png" alt="" width="50" height="50" />
            </div>
            <div class="item_right">
              <div class="name">郭晶晶</div>
              <div class="type">常规导师</div>
            </div>
          </div>
          <div class="by">
            <normal-guage-chart
              value="20"
              barMaxWidth="25"
              label="合格"
              labelColor="#00AD6F"
              valueColor="#00C37D"
              width="100%"
              height="100%"
            ></normal-guage-chart>
          </div>
        </div>
        <!--tab-->
        <div class="teaching-tab">
          <div class="teaching-tab_title">
            <van-tabs v-model:active="tabActive">
              <van-tab
                :title="item.label"
                v-for="(item, i) in tabData"
                :key="i"
              ></van-tab>
            </van-tabs>
            <!--课程评价-->
            <div class="kc-pj" v-if="tabActive == 0">
              <kc-collapse :data="kcpjList"></kc-collapse>
            </div>
            <div class="pj-box" v-else style="margin-top: 12px">
              <pj-card
                :data="item"
                v-for="(item, i) in pjList"
                :key="i"
              ></pj-card>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--提交评价-->
    <div class="wrap_footer" style="padding-bottom: 102px">
      <footer-button
        title="提交评价"
        color="linear-gradient(to right,#1BCD74,#1CA893)"
      ></footer-button>
    </div>
  </div>
</template>

<script>
import NormalGuageChart from "@/components/semicircleSchedule.vue";
import kcCollapse from "@/components/kc-collapse.vue";
import pjCard from "@/components/pj-card.vue";
import FooterButton from "@/components/FooterButton.vue";
export default {
  components: { NormalGuageChart, kcCollapse, pjCard, FooterButton },
  data() {
    return {
      tabData: [
        {
          label: "课程评价",
        },
        {
          label: "综合评价",
        },
      ],
      tabActive: "0",
      kcpjList: [
        {
          label: "带教课程带教课程带教课程",
          time: "2023-02-22  12:22:33",
          list: [
            {
              title: "带教模版验证数据",
              rate: 3,
            },
            {
              title: "带教模版验证数据",
              rate: 2,
            },
            {
              title: "带教模版验证数据",
              rate: 5,
            },
          ],
        },
        {
          label: "带教课程带教课程带教课程",
          time: "2023-02-22  12:22:33",
          list: [
            {
              title: "带教模版验证数据",
              rate: 3,
            },
            {
              title: "带教模版验证数据",
              rate: 2,
            },
            {
              title: "带教模版验证数据",
              rate: 5,
            },
          ],
        },
      ],
      pjList: [
        {
          title: "导师的带教态度",
          type: "choice",
          list: [
            {
              title: "非常好",
            },
            {
              title: "一般",
            },
            {
              title: "较差",
            },
          ],
        },
        {
          title: "导师对于带教的内容讲解效果",
          type: "choice",
          list: [
            {
              title: "非常好",
            },
            {
              title: "一般",
            },
            {
              title: "较差",
            },
          ],
        },
        {
          title: "导师对于带教的内容讲解效果",
          type: "rate",
          list: [
            {
              title: "非常好",
              rate: 5,
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  background: #f4f8ff;
  ::v-deep(.van-hairline--bottom:after) {
    border: none;
  }
  &_top {
    height: 344px;
    background-image: linear-gradient(180deg, #0dc678, #f4f8ff);
    padding: 0 16px;
    .cg-daoshi {
      margin-top: 30px;
      background: #fff;
      border-radius: 8px;
      position: relative;
      .item {
        display: flex;
        align-items: center;
        padding: 28px 20px;
        img {
          width: 50px;
          border-radius: 50%;
          margin-right: 11px;
        }
        .name {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #676b6b;
        }
        .type {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          font-size: 20px;
          color: #272b2d;
        }
      }
      .by {
        position: absolute;
        top: -39px;
        right: 10px;
        width: 140px;
        height: 120px;
        background: #fff;
        border-radius: 50%;
      }
    }
    .teaching-tab {
      margin-top: 16px;
      &_title {
        background: #fff;
        border-radius: 8px;
        height: 50px;
        ::v-deep(.van-tabs__line) {
          background: #0dc678;
        }
        .kc-pj {
          background: #fff;
          margin-top: 12px;
          border-radius: 8px;
          padding: 6px 0;
        }
      }
    }
  }
}
</style>
